<template>
  <div class="luckdraw">
    <van-image
      class="top-img"
      width="6.2rem"
      :src="require('@assets/img/luckdraw-top.jpg')"
    />
    <div class="luckdraw-con">
      <LuckyGrid
        ref="LuckDraw"
        width="6.2rem"
        height="6.6rem"
        :prizes="prizes"
        :blocks="blocks"
        :buttons="buttons"
        :default-style="defaultStyle"
        :active-style="activeStyle"
        @start="startCallBack"
        @end="endCallBack"
      />
      <div class="notice-wrap" v-if="noticeList&&noticeList.length">
        <van-swipe style="height: 100%;" vertical autoplay="3000" :touchable="false" :show-indicators="false">
          <van-swipe-item v-for="(item,index) in noticeList" :key="index">
            <div class="nptice-p">会员{{item.phone}} 抽中了<span>{{item.prizeName}}</span></div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <p class="tip">本活动最终解释权归琪迹养生所有</p>
    </div>
    <div class="prize-records-btn" @click="recordsClick">
      <i class="iconfont icon-hongbaozhongjiangjiluchaxun"></i>
      <p>中奖记录</p>
    </div>
  </div>
</template>

<script>
import footerTab from "@components/footerTab.vue";
import {LuckyGrid} from 'vue-luck-draw'
import { mapActions, mapGetters, mapMutations } from "vuex";  //vuex得各个方法   mapGetters放在computed里面 之后可以在当前页面用 this.userInfo 使用这个全局变量
export default {
  name: "luckdraw",
  data() {
    return{
      prizes: [],
      blocks: [
        { padding: '1px', background: '#e2cea3', borderRadius: '13px' },
        { padding: '5px 0px', background: '#f3ecdc', borderRadius: '13px' },
        { padding: '1px', background: '#e2cea3', borderRadius: '8px' },
        { padding: '15px 10px', background: '#fffcf5', borderRadius: '8px' },
      ],
      buttons: [{
        x: 1, y: 1, background: 'rgba(0, 0, 0, 0)',
        imgs: [
          { src: require('@assets/img/start-btn.png'), width: '90%', top: '5%' }
        ]
      }],
      defaultStyle: {
        background: '#ffefd6',
        borderRadius: '0.1rem',
        fontColor: '#755c28',
        fontSize: '0.2rem',
        lineHeight: '0.24rem'
      },
      activeStyle: {
        background: '#de7247',
        fontColor: '#ffefd6',
      },
      noticeList:[
        {
          phone:'135****8686',
          prizeName:'多层置物架'
        },
        {
          phone:'135****9999',
          prizeName:'胖喵焖烧罐'
        },
        {
          phone:'135****9898',
          prizeName:'10元满减红包'
        },
        {
          phone:'135****6969',
          prizeName:'电热烘干毛巾架'
        }
      ]
    }
  },
  components: {
    footerTab,
    LuckyGrid
  },
  mounted () {
    this.getPrizesList()
  },
  methods: {
    ...mapMutations({               //set 设置vuex变量得值  也可以用this.$store.commit('setToken','as')  这样设置 setToken需在store/index.js mutations里得定义
      setUserInfo: "setUserInfo",   //设置用户信息
    }),
    getPrizesList(){
       const prizes = [];
       let axis = [[0, 0], [1, 0], [2, 0], [2, 1], [2, 2], [1, 2], [0, 2], [0, 1]]
       let data = ['电热烘干毛巾架', '10元满减红包', '2积分', '胖喵焖烧罐', '5元满减红包', '多层置物架', '3元直减红包', '全场满99减10']
       axis.forEach((item, index) => {
        prizes.push({
          x: item[0], y: item[1],
          title: data[index],
          fonts: [{
            text: data[index],
            top:'70%'
          }],
          imgs: [{
            width: '50%',
            height: '50%',
            top:'15%',
            src: require(`@assets/img/liping.png`),
          }]
        })
      })
      this.prizes = prizes
    },
    //开始
    startCallBack(){
      this.$refs.LuckDraw.play()
      setTimeout(() => {
        this.$refs.LuckDraw.stop(Math.random() * 8 >> 0)
      }, 100)
    },
    //结束
    endCallBack(prize){
      this.$dialog.alert({
        title: '恭喜你',
        message: `获得${prize.title}`,
        showCancelButton:true,
        confirmButtonColor:'#2d8cf0',
        confirmButtonText:'查看中奖记录',
      }).then(() => {
        this.$router.push({path:`/prizeRecords`})
        // on close
      }).catch(() => {
          console.log('取消了')
        // on cancel
      });
    },
    //中奖记录点击
    recordsClick(){
      this.$router.push({path:`/prizeRecords`})
    }
  },
};
</script>

<style lang="scss" scoped>
.luckdraw{
  min-height: 100vh;
  background: url("../../assets/img/luckdraw-bg.jpg");
  background-size: cover;
  padding-top: 0.44rem;
  position: relative;
  .top-img{
    display: block;
    margin: 0 auto;
  }
  .luckdraw-con{
    margin-top: 0.46rem;
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
    .notice-wrap{
      width: 6rem;
      margin-top: 0.4rem;
      height: 0.3rem;
      overflow: hidden;
      &::v-deep{
        .van-swipe{
          .van-swipe-item{
            display: flex;
            align-items: center;
            justify-content: center;
            .nptice-p{
              font-size: 0.24rem;
              span{
                color:#2d8cf0;
                margin-left: 0.05rem;
              }
            }
          }
        }
      }
    }
    .tip{
      width: 6rem;
      margin: 0.5rem auto 0;
      text-align: center;
      color:#755c28;
      font-size: 0.26rem;
    }
  }
  .prize-records-btn{
    position: absolute;
    z-index: 12;
    bottom: 1rem;
    right: .3rem;
    box-shadow: 0 3px 10px 0 rgba(253 ,149 ,24 ,0.6);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: #ffefd6;
    color: #755c28;
    user-select: none;
    transform: scale(0.8);
    animation:zoomLoop 3s ease-in-out infinite;
    i{
      font-size: 0.5rem;
      margin-top: -0.05rem;
    }
    p{
      margin-top: 0.04rem;
      font-size: 0.18rem;
    }
  }
  @keyframes zoomLoop {
    0% {
      transform: scale(0.8);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }
}
</style>